<h1 class="mb-4 text-lg font-extrabold tracking-tight">Search the seas.</h1>
<.simple_form :let={f} for={%{}} as={:search} phx-change="search" phx-submit="submit">
  <.input
    phx_debounce="300"
    field={f[:search_term]}
    value={@search_term}
    placeholder="Search for any torrent by name."
    class="p-5 mt-0 tracking-tight border-0 bg-neutral-100 rounded-xl sm:text-base placeholder:text-neutral-400"
  />
</.simple_form>

<hr class="my-8 border-black/10" />

<div class="grid grid-cols-[14rem_minmax(0px,_1fr)] items-start gap-8">
  <div>
    <h2 class="mb-2 text-lg font-bold tracking-tight">Indexing Summary</h2>
    <p class="mb-2 text-sm">
      How many torrents we've imported from each of the supported sources.
    </p>
    <div class="flex flex-col">
      <button :for={{source, count} <- @indexing_summary} class="flex items-center gap-1 group">
        <div class="w-1 h-6 bg-black rounded-full"></div>

        <div class="flex items-baseline justify-between flex-1 px-2 py-2 rounded-lg bg-neutral-100">
          <div class="text-sm"><%= source %></div>
          <div class="text-xs text-neutral-500"><%= count %></div>
        </div>
      </button>
    </div>
  </div>

  <div>
    <h2 class="mb-2 text-lg font-bold">Latest torrents</h2>

    <div class="mb-6 overflow-hidden border border-black/10 rounded-xl">
      <.table class="w-full table-auto" id="torrents" rows={@torrents}>
        <:col :let={torrent} label="Name">
          <.link class="flex flex-col" navigate={~p"/torrents/#{torrent.id}/#{torrent.slug}"}>
            <span
              title={torrent.name}
              class="inline-block max-w-md overflow-hidden text-sm font-medium 2xl:max-w-2xl whitespace-nowrap text-ellipsis"
            >
              <%= torrent.name %>
            </span>
            <span class="inline-block text-sm font-normal text-neutral-500">
              <%= torrent.category.name %> &middot; <%= torrent.source.name %> &middot;
              <span title="When this torrent was originally published.">
                <%= torrent.published_at
                |> Calendar.strftime("%B %-d, %Y - %I:%M:%S %p %Z") %>
              </span>
            </span>
          </.link>
        </:col>
        <:col :let={torrent} label="Filesize" class="font-mono tabular-nums">
          <%= torrent.size_in_bytes |> Size.humanize!() %>
        </:col>

        <:col :let={torrent} label="Seeds" class="font-mono tabular-nums">
          <%= torrent.seeders %>
        </:col>

        <:col :let={torrent} label="Peers" class="font-mono tabular-nums">
          <%= torrent.leechers %>
        </:col>

        <:col :let={torrent} label="Magnet" class="flex items-center justify-center">
          <.link
            href={{:magnet, torrent.magnet_url}}
            class="p-2 inline-block ring-inset ring-1 ring-black/[.15] hover:bg-neutral-100 rounded-full text-neutral-700"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="currentColor"
            >
              <path d="M19 3h-3c-1.103 0-2 .897-2 2v8c0 1.103-.897 2-2 2s-2-.897-2-2V5c0-1.103-.897-2-2-2H5c-1.103 0-2 .897-2 2v8c0 4.963 4.037 9 9 9s9-4.037 9-9V5c0-1.103-.897-2-2-2zm-3 2h3v3h-3V5zM5 5h3v3H5V5zm7 15c-3.859 0-7-3.141-7-7v-3h3v3c0 2.206 1.794 4 4 4s4-1.794 4-4v-3h3v3c0 3.859-3.141 7-7 7z">
              </path>
            </svg>
          </.link>
        </:col>
      </.table>
    </div>
  </div>
</div>
